<template>
  <div>
    <div class="notAuthShare_checkbox_cost_card" v-if="dataList && dataList.length">
      <van-row type="flex" class="nav" style="padding: 10px 0; width:100%">
        <div :class="{titleBorder: active == 0}" class="titleTab" @click="goAll">全部公司</div>
        <div :class="{titleBorder: active == 1}" class="titleTab" v-if="comTitle != ''" @click="() => (active = 1)">
          {{ comTitle }}
        </div>
        <div :class="{titleBorder: active == 2}" class="titleTab" v-if="staffTitle != ''" @click="() => (active = 2)">
          {{ staffTitle }}
        </div>
      </van-row>

      <van-cell-group v-if="active == 0">
        <van-cell v-for="(item, index) in dataList" :key="index" @click="toggleEach(index)" class="checkbox_item">
          <template #title>
            <van-row v-show="keyWord === 'shareOrNot'" class="notAuthShare_item" type="flex" align="center">
              <van-col span="5">
                <div>
                  <van-image round cover width="1rem" height="1rem" :src="item.logo" />
                  <div style="margin-top: 10px; font-weight: bold">{{ '麦穗' }}</div>
                </div>
              </van-col>
              <van-col span="17">
                <div style="text-align: left" class="share_item">
                  <span>公司名称：</span>
                  <span>{{ item.name }}</span>
                </div>
                <div style="margin-top: 10px; text-align: left" class="share_item">
                  <span>营业执照：</span>
                  <span>{{ '914403001922038216' }}</span>
                </div>
              </van-col>
            </van-row>

            <van-row
              v-show="keyWord === 'staffList'"
              type="flex"
              justify="space-between"
              class="part_recruitmentManagement"
            >
              <van-col span="6">
                <div>
                  <van-image round cover width="1.5rem" height="1.5rem" :src="item.logo" />
                  <div style="margin-top: 6px">
                    {{ '麦穗' }}
                  </div>
                </div>
              </van-col>

              <van-col span="18">
                <div style="text-align: left">
                  <span>姓名：</span>
                  <span>{{ item.nick_name }}</span>
                </div>

                <div style="margin-top: 10px; text-align: left">
                  <span>性别：</span>
                  <span>{{ item.gender == 1 ? '男' : '女' }}</span>
                </div>
                <div style="margin-top: 10px; text-align: left">
                  <span>手机号码：</span>
                  <span
                  >{{ item.mobile
                    }}<van-tag plain style="margin-left: 10px;" type="primary" @click.stop="phoneContact"
                    >电话联系</van-tag
                    ></span
                  >
                </div>
                <div style="margin-top: 10px; text-align: left">
                  <span>身份证号：</span>
                  <span>{{ item.card_id == 'null' ? item.card_id : '110101199003077117' }}</span>
                </div>
                <div style="margin-top: 10px; text-align: left">
                  <span>报名时间：</span>
                  <span>{{ item.registertime }}</span>
                </div>
                <div style="margin-top: 10px; text-align: left">
                  <span>报到时间：</span>
                  <span>{{ '2021-03-24 15:35:17' }}</span>
                </div>

                <!--<div v-show='advaceInfotype==2' style="margin-top: 10px; text-align: left">
                    <span><van-tag
                      :type="isRead === 'read' ? 'success' : 'warning'"
                    >{{isRead === 'read' ? '报名已读' : '报名未读'}}</van-tag>
                    </span>
                  </div>-->

                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>报名状态：</span>
                  <span>{{ '未读' }}</span>
                </div>

                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>报到时间：</span>
                  <span>{{ '2021-03-24 15:35:17' }}</span>
                </div>
                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>接送时间：</span>
                  <span>{{ '2021-03-25 15:35:17' }}</span>
                </div>
                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>到用企时间：</span>
                  <span>{{ '2021-03-25 15:35:17' }}</span>
                </div>
                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>分宿舍时间：</span>
                  <span>{{ '2021-03-25 15:35:17' }}</span>
                </div>
                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>培训时间：</span>
                  <span>{{ '2021-03-25 15:35:17' }}</span>
                </div>
                <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                  <span>签合同时间：</span>
                  <span>{{ '2021-03-25 15:35:17' }}</span>
                </div>
                <div style="margin-top: 10px; text-align: left">
                  <span>渠道来源：</span>
                  <span>{{ '近聘' }}</span>
                </div>

                <div v-show="!advaceInfotype" style="margin-top: 10px; text-align: left">
                  <span>渠道备注：</span>
                  <input type="textare" />
                  <van-tag plain style="margin-left: 8px;" type="primary" @click.stop="phoneContact">提交</van-tag>
                </div>

                <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                  <span>工作状态：在职</span>
                </div>
                <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                  <span>申请借支金额：1000元</span>
                  <span
                  ><van-tag plain style="margin-left: 10px;" type="primary" @click.stop="lookprice">查看</van-tag>
                  <van-tag plain style="margin-left: 10px;" type="primary" @click.stop="lookjl">记录</van-tag>
                </span>
                </div>
                <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                  <span>借支状态：申请中</span>
                </div>

                <div v-show="!advaceInfotype" style="margin-top: 10px; text-align: left">
                  <span>职位状态备注：</span>
                  <input type="textare" />
                  <van-tag
                    plain
                    style="margin-left: 10px;position:absolute;bottom:10px"
                    type="primary"
                    @click.stop="phoneContact"
                  >提交</van-tag
                  >
                </div>
              </van-col>
            </van-row>

            <com-my-attention
              @click.native="goEmployee(item)"
              v-show="keyWord === 'upAndDownstreamCompany'"
              :data-item="item"
              :no-folltime="true"
              :can-not-go-company="true"
            >
              <div style="margin-top: 10px; text-align: left" class="concern_item">
                <span>申请时间：</span>
                <span>{{ item.create_time ? item.create_time : '' }}</span>
              </div>
              <div style="margin-top: 10px; text-align: left; display: flex; align-items:center;" class="concern_item">
                <template v-if="item.audit === 1">
                  <span>{{ '已授权时间：' }}</span>
                  <span>{{ item.auditdate ? item.auditdate : '' }}</span>
                </template>
                <template v-else-if="item.audit === 2">
                  <span>{{ '不授权时间：' }}</span>
                  <span>{{ item.auditdate ? item.auditdate : '' }}</span>
                </template>
                <span v-else> 未授权 </span>
              </div>
            </com-my-attention>
          </template>

          <template #right-icon> </template>
        </van-cell>
      </van-cell-group>
      <van-checkbox-group
        ref="checkboxGroup"
        v-model="currentSelectedArr"
        class="multiple_checkbox_card"
        @change="pitchOn"
      >
        <van-cell-group v-if="active == 1">
          <job-item-for-recruit
            v-for="(item, index) in needObjList"
            :key="index"
            @getStaff="getStaff"
            transmitStr="转发后的信息"
            :jobItem="item"
            :needStaff="true"
            :keyWord="'upstreamDownstreamManagement'"
            :type="type"
          ></job-item-for-recruit>
          <!-- <job-item-for-recruit
          @getStaff="getStaff"
          transmitStr="转发后的信息"
          :jobItem="needObj"
          :needStaff='true'
          :keyWord="'upstreamDownstreamManagement'"
          :type="type"
        ></job-item-for-recruit>
          <job-item-for-recruit
          @getStaff="getStaff"
          transmitStr="转发后的信息"
          :jobItem="needObj"
          :needStaff='true'
          :keyWord="'upstreamDownstreamManagement'"
          :type="type"
        ></job-item-for-recruit>-->
        </van-cell-group>
        <van-cell-group v-if="active == 2">
          <job-item-for-recruit
            v-for="(item, index) in needObjList"
            :key="index"
            @getStaff="getStaff"
            transmitStr="转发后的信息"
            :jobItem="item"
            :needStaff="true"
            :keyWord="'upstreamDownstreamManagement'"
            :type="type"
          ></job-item-for-recruit>
          <template v-if="keyWord === 'upAndDownstreamCompany'">
            <van-cell v-for="(item, index) in applist" :key="index" @click="toggleEach(index)" class="checkbox_item">
              <template #title>
                <van-row type="flex" justify="space-between" class="part_upAndDownstreamCompany">
                  <van-col span="6">
                    <div>
                      <van-image round cover width="1.5rem" height="1.5rem" :src="item.avatar" />
                      <!-- <div style="margin-top: 6px">
                        {{ type == 0 || type == 2 ? '麦穗-下游' : '麦穗-上游' }}
                      </div> -->
                    </div>
                  </van-col>
                  <van-col span="18">
                    <time-type-opt :item="item"></time-type-opt>
                  </van-col>
                </van-row>
              </template>

              <template #right-icon>
                <van-checkbox :name="item.id" shape="square" ref="checkboxes" checked-color="#FA743B" />
              </template>
            </van-cell>
          </template>
          <template v-else>
            <van-cell v-for="(item, index) in dataList" :key="index" @click="toggleEach(index)" class="checkbox_item">
              <template #title>
                <van-row v-show="keyWord === 'shareOrNot'" class="notAuthShare_item" type="flex" align="center">
                  <van-col span="5">
                    <div>
                      <van-image round cover width="1rem" height="1rem" :src="item.logo" />
                      <div style="margin-top: 10px; font-weight: bold">{{ '麦穗' }}</div>
                    </div>
                  </van-col>
                  <van-col span="17">
                    <div style="text-align: left" class="share_item">
                      <span>公司名称222：</span>
                      <span>{{ item.name }}</span>
                    </div>
                    <div style="margin-top: 10px; text-align: left" class="share_item">
                      <span>营业执照：</span>
                      <span>{{ '914403001922038216' }}</span>
                    </div>
                  </van-col>
                </van-row>

                <van-row
                  v-show="keyWord === 'staffList'"
                  type="flex"
                  justify="space-between"
                  class="part_recruitmentManagement"
                >
                  <van-col span="6">
                    <div>
                      <van-image round cover width="1.5rem" height="1.5rem" :src="item.logo" />
                      <div style="margin-top: 6px">
                        {{ '麦穗' }}
                      </div>
                    </div>
                  </van-col>

                  <van-col span="18">
                    <div style="text-align: left">
                      <span>姓名：</span>
                      <span>{{ item.nick_name }}</span>
                    </div>

                    <div style="margin-top: 10px; text-align: left">
                      <span>性别：</span>
                      <span>{{ item.gender == 1 ? '男' : '女' }}</span>
                    </div>
                    <div style="margin-top: 10px; text-align: left">
                      <span>手机号码：</span>
                      <span
                      >{{ item.mobile
                        }}<van-tag plain style="margin-left: 10px;" type="primary" @click.stop="phoneContact"
                        >电话联系</van-tag
                        ></span
                      >
                    </div>
                    <div style="margin-top: 10px; text-align: left">
                      <span>身份证号：</span>
                      <span>{{ item.card_id == 'null' ? item.card_id : '110101199003077117' }}</span>
                    </div>
                    <div style="margin-top: 10px; text-align: left">
                      <span>报名时间：</span>
                      <span>{{ item.registertime }}</span>
                    </div>
                    <div style="margin-top: 10px; text-align: left">
                      <span>报到时间：</span>
                      <span>{{ '2021-03-24 15:35:17' }}</span>
                    </div>

                    <!--<div v-show='advaceInfotype==2' style="margin-top: 10px; text-align: left">
                      <span><van-tag
                        :type="isRead === 'read' ? 'success' : 'warning'"
                      >{{isRead === 'read' ? '报名已读' : '报名未读'}}</van-tag>
                      </span>
                    </div>-->

                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>报名状态：</span>
                      <span>{{ '未读' }}</span>
                    </div>

                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>报到时间：</span>
                      <span>{{ '2021-03-24 15:35:17' }}</span>
                    </div>
                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>接送时间：</span>
                      <span>{{ '2021-03-25 15:35:17' }}</span>
                    </div>
                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>到用企时间：</span>
                      <span>{{ '2021-03-25 15:35:17' }}</span>
                    </div>
                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>分宿舍时间：</span>
                      <span>{{ '2021-03-25 15:35:17' }}</span>
                    </div>
                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>培训时间：</span>
                      <span>{{ '2021-03-25 15:35:17' }}</span>
                    </div>
                    <div v-show="advaceInfotype == 2" style="margin-top: 10px; text-align: left">
                      <span>签合同时间：</span>
                      <span>{{ '2021-03-25 15:35:17' }}</span>
                    </div>
                    <div style="margin-top: 10px; text-align: left">
                      <span>渠道来源：</span>
                      <span>{{ '近聘' }}</span>
                    </div>

                    <div v-show="!advaceInfotype" style="margin-top: 10px; text-align: left">
                      <span>渠道备注：</span>
                      <input type="textare" />
                      <van-tag plain style="margin-left: 8px;" type="primary" @click.stop="phoneContact">提交</van-tag>
                    </div>

                    <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                      <span>工作状态：在职</span>
                    </div>
                    <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                      <span>申请借支金额：1000元</span>
                      <span
                      ><van-tag plain style="margin-left: 10px;" type="primary" @click.stop="lookprice">查看</van-tag>
                      <van-tag plain style="margin-left: 10px;" type="primary" @click.stop="lookjl">记录</van-tag>
                    </span>
                    </div>
                    <div v-show="advaceInfotype == 1" style="margin-top: 10px; text-align: left">
                      <span>借支状态：申请中</span>
                    </div>

                    <div v-show="!advaceInfotype" style="margin-top: 10px; text-align: left">
                      <span>职位状态备注：</span>
                      <input type="textare" />
                      <van-tag
                        plain
                        style="margin-left: 10px;position:absolute;bottom:10px"
                        type="primary"
                        @click.stop="phoneContact"
                      >提交</van-tag
                      >
                    </div>
                  </van-col>
                </van-row>

                <van-row
                  v-show="keyWord === 'upAndDownstreamCompany'"
                  type="flex"
                  justify="space-between"
                  class="part_upAndDownstreamCompany"
                >
                  <van-col span="6">
                    <div>
                      <van-image round cover width="1.5rem" height="1.5rem" :src="item.logo" />
                      <div style="margin-top: 6px">
                        {{ type == 0 || type == 2 ? '麦穗-下游' : '麦穗-上游' }}
                      </div>
                    </div>
                  </van-col>
                  <van-col span="18">
                    <time-type-opt :item="applist[index]"></time-type-opt>
                  </van-col>
                </van-row>
              </template>

              <template #right-icon>
                <van-checkbox :name="item.id" shape="square" ref="checkboxes" checked-color="#FA743B" />
              </template>
            </van-cell>
          </template>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <van-empty v-else description="暂无数据" :style="{marginTop: '-10%'}" />
  </div>

</template>

<script>
import {Dialog, Toast} from 'vant'
import comMyAttention from '@/components/comMyAttention'
import timeTypeOpt from './timeTypeOpt.vue'
import logoImg from '@/assets/logo.png'
import comJobItem from '../../../../components/comJobItem';
import jobItemForRecruit from "../../recruitmentManagement/common/jobItemForRecruit";
export default {
  name: 'comMultipleCheckboxCard',
  components: {
    timeTypeOpt,
    comMyAttention,
    comJobItem,
    jobItemForRecruit,
  },
  props: {
    dataList: Array,
    actionType: String,
    keyWord: String,
    isRead: String,
    advaceInfotype: String,
    type: String,
    enroll: String,
    needObj: Object
  },
  data() {
    return {
      staffTitle: '',
      companyItem: {},
      applist: [],
      logoImg,
      needObjList: [],
      active: 0,
      comTitle: '',
      // 当前选中列表
      currentSelectedArr: [],
      btnStatus: false,
      isExpand: false,
      checked: true
      // type: this.$route.params.type
    }
  },
  watch: {
    active(val) {
      if (val === 2) {
        this.$emit('showOverlay', true)
      } else {
        this.$emit('showOverlay', false)
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    goAll() {
      this.active = 0
      this.comTitle = ''
    },
    async goEmployee(item) {
      console.log(item, 1171723372)
      // return false
      const {job_id} = item
      this.companyItem = item
      const comMesRes = await this.$api.job.cooperationHavedetail({job_id})
      this.needObjList = comMesRes.data.jobinfo
      this.applist = comMesRes.data.applist.map(v => {
        v.price = v.price || 500
        v.pricetime = v.amount || 5
        v.total = v.money || 2500
        v.unit = v.unit || '元/时'
        return v
      })
      this.comTitle = '转发信息'
      this.active = 1
    },
    async getStaff(item) {
      const {job_id} = this.dataList[0]
      this.companyItem = this.dataList[0]
      const comMesRes = await this.$api.job.cooperationHavedetail({job_id})
      this.applist = comMesRes.data.applist.map(v => {
        v.price = v.price || 500
        v.pricetime = v.amount || 5
        v.total = v.money || 2500
        v.unit = v.unit || '元/时'
        return v
      })
      this.staffTitle = '员工信息'
      this.active = 2
    },
    //查看
    lookprice() {
      // this.$router.push({
      //   path: '/applyLendMoney',
      //   query: {
      //     search_type: 1
      //   }
      // })
    },
    deleteNotAuthShareList() {
      if (this.currentSelectedArr.length) {
        Dialog.confirm({
          title: '温馨提示',
          message: this.actionType === 'delete' ? '你确定删除吗？' : '你确定新增不可转发吗？'
        })
          .then(() => {
            // on confirm
            if (this.actionType === 'delete') {
              console.log('删除')
            } else if (this.actionType === 'add') {
              console.log('新增')
            }
          })
          .catch(() => {
            // on cancel
          })
      } else {
        Toast('未选择！')
      }
    },

    toggleEach(index) {
      // console.log('多选card组件--必须使用下标', index)
      this.$refs.checkboxes && this.$refs.checkboxes.length && this.$refs.checkboxes[index].toggle()
    },

    pitchOn() {
      this.$emit(
        'sendSelectedArr',
        this.currentSelectedArr,
        this.companyItem,
        this.applist.filter(v => this.currentSelectedArr.includes(v.id))
      )
    },

    expandAllData() {
      // todo 展开全部
      console.log('展开全部')
      this.isExpand = !this.isExpand
    },
    checkAllOrNot() {
      this.$refs.checkboxGroup.toggleAll(!this.btnStatus)
      this.btnStatus = !this.btnStatus
    },

    operationShare() {
      console.log('是否转发')
      Dialog.confirm({
        // title: '温馨提示',
        message: '你确定更改吗？'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },

    phoneContact() {
      console.log('电话联系')
    }
  }
}
</script>

<style lang="scss" scoped>
.notAuthShare_checkbox_cost_card {
  .nav {
    background: #fff;
    display: flex;
    :first-child {
      // margin-left: 20px;
    }
    .titleTab {
      // border-bottom:2px solid red;
      padding: 10px 5px;
      font-size: 16px;
      flex: 1;
      text-align: center;
    }
    .titleBorder {
      border-bottom: 2px solid red;
    }
  }
  .allCheck {
    background: #fff;
  }
  .concern_cost_item {
    .van-button {
      padding: 0;
      height: auto;
      width: auto;
      font-size: 0.34667rem;
      span {
        margin: 0;
      }
    }
    span {
      margin-right: 10px;
    }
  }
  .checkbox_item {
    padding: 6px 10px 6px 0;
    border: 1px solid #eeeeee;
    .notAuthShare_item,
    .part_recruitmentManagement,
    .part_upAndDownstreamCompany {
      background-color: #ffffff;
      text-align: center;
      box-sizing: border-box;
      line-height: 1.1em;
      padding: 3px 0;
      font-size: 13px;
      .share_item {
        display: flex;
        span {
          &:first-of-type {
            width: 5em;
            font-size: 13px;
            /* 某一项不缩放  */
            flex-shrink: 0;
          }
          &:last-of-type {
            letter-spacing: 0.3px;
          }
        }
      }
    }
  }

  .userInfoBtn {
    width: 50px;
    height: 30px;
    margin: 5px 0;
    margin-top: 5px;
    .userInfo_Btn {
      width: 100%;
      height: 30px;
      margin-top: 5px;
    }
  }
}
</style>
